<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="backText">返回</block>
			<block slot="content" class="text-bold"> 用户中心 </block>
		</cu-custom>
		<view
			style="background-image:url(http://192.168.0.103:8080/oss/yue-bike/bg-user.jpeg); "
			:style="{height:windowHeight*0.35+'rpx',lineHeight:windowHeight*0.35+'rpx'}"
			class="text-center align-center ">
			<view class="cu-avatar round xal" :style="{'background-image':'url('+userInfo.avatarUrl+')'}"
				style="size: a4;">
				<view class="cu-tag badge" :class="userInfo.gender==1?'cuIcon-male bg-blue':'cuIcon-female bg-pink'"></view>
			</view>
		</view>
		<view class="text-center text-bold text-grey">{{userInfo.nickName}}</view>
		<view class="grid  text-center col-4 margin-top-sm">
			<view class="grid  text-center col-1">
				<view>{{statistics.collect}}</view>
				<view class="text-sm text-grey font-kaiti">收藏</view>
			</view>
			<view class="grid  text-center col-1">
				<!-- 浏览记录 -->
				<view>{{statistics.history}}</view>
				<view class="text-sm text-grey font-kaiti">浏览历史</view>
			</view>
			<view class="grid  text-center col-1">
				<!-- 我的关注 -->
				<view>{{statistics.favor}}</view>
				<view class="text-sm text-grey font-kaiti">关注</view>
			</view>
			<view class="grid  text-center col-1">
				<!-- 我的粉丝 -->
				<view>{{statistics.fans}}</view>
				<view class="text-sm text-grey font-kaiti">粉丝</view>
			</view>
		</view>
		<view class="cuIcon-profilefill text-black  margin-left margin-top text-bold " @click="changeBlock">
			<text class="text-black  margin-left margin-top text-bold text-lg">骑行消息</text>
			<text :class="block?'cuIcon-unfold':'cuIcon-right'"></text>
		</view>
		<view class=" cu-list menu sm-border margin-top" v-if="block">
			<view class="cu-item ">
				<view class="content cuIcon-right">
					<text class="text-grey margin-left">我的发布</text>
				</view>
			</view>
			<view class="cu-item ">
				<view class="content cuIcon-right">
					<text class="text-grey margin-left">评论/回复</text>
				</view>
			</view>
		</view>
		<!-- 更多选项设置 -->
		<more></more>
		<view class="text-center margin-top-xl text-gray">
			<text>太阳花科技提供技术支持</text>
		</view>

	</view>
</template>

<script>
	import more from './more.vue'
	export default {
		data() {
			return {
				block: false,
				windowHeight: 1,
				windowWidth: 1,
				statistics: {
					collect: 1,
					history: 1,
					favor: 1,
					fans: 1
				},
				userInfo: {
					nickName: "1",
					avatarUrl: ""
				}
			}
		},
		components: {
			more
		},
		methods: {
			changeBlock() {
				this.$data.block = !this.$data.block
			}
		},
		created() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		beforeMount() {
			let that = this;
			uni.getSystemInfo({
				success: (res) => {
					that.$data.windowHeight = res.windowHeight
					that.$data.windowWidth = res.windowWidth
				}
			})
		}
	}
</script>

<style>
	.xal {
		width: 180upx;
		height: 180upx;
		font-size: 2.5em;
	}

	.font-kaiti {
		font-family: 楷体;
	}
</style>
